<!-- 事件统计分析 -->

<template>
    <div class="wrapper">
        <!-- 报表Tabs组件-->
        <ReportTabs :curTab="curTab" :tabDatas="tabDatas" :isExport="isExport" @updateTab="updateTab" @handleExport="handleExport" />
        <!-- 动态组件-->
        <keep-alive>
            <EventStaticTable v-if="curTab === '1'" @updateEventData="updateEventData" ref="staticTable"/>
        </keep-alive>
        <EventExportTable v-if="curTab === '2'" :queryData="queryData" @updateEventData="updateEventData" />
    </div>
</template>

<script setup>
import { ref } from 'vue';

import ReportTabs from '@/components/reportTabs/index.vue';
import EventStaticTable from './c/EventStaticTable.vue';
import EventExportTable from './c/EventExportTable.vue';

const curTab = ref('1');
const isExport = ref(true);
const staticTable = ref(null);
const queryData = ref({});

// tabs 数据
const tabDatas = ref([
    {
        id: '1',
        label: '事件统计'
    },
    {
        id: '2',
        label: '离线导出'
    }
]);

const updateTab = (id) => {
    curTab.value = id;
    
    isExport.value = id === '1'? true : false;
};

// 导出
const handleExport = () => {
    const callback = (data) => {
        curTab.value = '2';
        queryData.value = data;
    };
    
    staticTable.value.handleExport(callback);
};
</script>

<style lang="scss" scoped></style>